<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 800px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%;
      height: 0px;
    }
  </style>
</head>
<body>
  <div>fps: <span id="fps">--</span> | sprites: <span id="spriteCount">1</span></div>
  <div id="paper"></div>
  
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <!--<script src="https://s2.ssl.qhres.com/!39729fa5/sprite2-1.0.0.js"></script>-->
  <script src="/js/spritejs.js"></script>
  <script>
const paper = spritejs.Paper2D('#paper'),
  fglayer = paper.layer('fglayer'),
  Sprite = spritejs.Sprite,
  Group = spritejs.Group

paper.setResolution(800, 600)

const s1 = new Sprite()
s1.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'red',
  rotate: 90,
})

const s2 = new Sprite()
s2.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'green',
  rotate: 180,
})

const s3 = new Sprite()
s3.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'blue',
})

const group = new Group()

group.append(s1, s2, s3)

fglayer.append(group)

group.attr({
  anchor: 0.5,
  pos: [200, 200],
  rotate: 0,
  border: [20, 'red'],
  bgcolor: 'grey',
  // size: [200, 200],
})

s1.on('click', (evt) => {
  console.log(evt)
})

group.animate([
  {rotate: 360}
], {
  duration: 20000,
  iterations: Infinity,
  direction: 'reverse',
})

s1.animate([
  {rotate: 450},
], {
  duration: 10000,
  iterations: Infinity,
})

s2.animate([
  {rotate: 540},
], {
  duration: 10000,
  iterations: Infinity,
})

s3.animate([
  {rotate: 360},
], {
  duration: 10000,
  iterations: Infinity,
})

group.on('mouseenter', (evt) => {
  console.log('enter')
})

group.on('mouseleave', (evt) => {
  console.log('leave')
})
  </script>
</body>
</html>